<template>
	<div class="page-ctx">
		<div class="section">
			<div class="sec-title">基本信息</div>
			<div class="sec-ctx">
				<div class="base-box">
					<div class="base-left">
						<div class="avatar-box">
							<el-image style="width: 70px; height: 70px" :src="info.image" :preview-src-list="[info.image]">
							</el-image>
						</div>
					</div>
					<div class="base-right">
						<div class="info-list">
							<div class="info-item">
								<div class="label">用户ID：</div>
								<div class="val">{{info.id}}</div>
							</div>
							<div class="info-item">
								<div class="label">用户状态：</div>
								<div class="val">正常
									<!-- 加入黑名单 冻结 -->
								</div>
							</div>
							<div class="info-item">
								<div class="label">用户身份：</div>
								<div class="val">普通用户</div>
							</div>
							<div class="info-item">
								<div class="label">会员等级：</div>
								<div class="val">{{info.level}}</div>
							</div>
							<div class="info-item">
								<div class="label">成为用户时间：</div>
								<div class="val">{{info.createdTime}}</div>
							</div>
							<!-- <div class="info-item">
								<div class="label">用户渠道：</div>
								<div class="val">{{'网站注册'}}</div>
							</div> -->
						
							<div class="info-item">
								<div class="label">最近更新：</div>
								<div class="val">{{info.updatedTime}}</div>
							</div>
						
							<!-- <div class="info-item">
								<div class="label">登录设备：</div>
								<div class="val">-</div>
							</div> -->
							<div class="info-item">
								<div class="label">最后一次登录时间：</div>
								<div class="val">{{info.lastLogin}}</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="section">
			<div class="sec-title">个人资料</div>
			<div class="sec-ctx">
				<div class="xinxi-box">
					<div class="info-list">
						<div class="info-item">
							<div class="label">昵称：</div>
							<div class="val">{{info.nickname}}</div>
						</div>
						<div class="info-item">
							<div class="label">姓名：</div>
							<div class="val">{{info.realName}}</div>
						</div>
						<div class="info-item">
							<div class="label">性别：</div>
							<div class="val">{{info.sex}}</div>
						</div>
						<div class="info-item">
							<div class="label">生日：</div>
							<div class="val">{{info.birthday}}</div>
						</div>
						<div class="info-item">
							<div class="label">手机号：</div>
							<div class="val">{{info.phone}}</div>
						</div>
						<div class="info-item">
							<div class="label">邮箱：</div>
							<div class="val">{{info.email}}</div>
						</div>
						<div class="info-item">
							<div class="label">身份证号：</div>
							<div class="val">{{info.identityId}}</div>
						</div>
						<div class="info-item">
							<div class="label">地址：</div>
							<div class="val">{{info.address}}</div>
						</div>
					</div>
				</div>
			</div>
		</div>


		<div class="section">
			<div class="sec-title">认证信息</div>
			<div class="sec-ctx">
				<div class="xinxi-box">
					<div class="info-list">
						<div class="info-item">
							<div class="label">认证状态：</div>
							<div class="val">{{auth_status_title}} <el-link type="primary" @click="open_auth()">审核</el-link></div>
						</div>
						<div class="info-item">
							<div class="label">单位名称：</div>
							<div class="val">{{info.company}}</div>
						</div>
						<div class="info-item">
							<div class="label">单位或经营场所的所在区域：</div>
							<div class="val">{{info.address}}</div>
						</div>
						<div class="info-item">
							<div class="label">法定代表人或经营者姓名：</div>
							<div class="val">{{info.legalName}}</div>
						</div>
						<div class="info-item">
							<div class="label">法定代表人或经营者手机号：</div>
							<div class="val">{{info.legalPhone}}</div>
						</div>
					</div>
				</div>
			</div>
		</div>



		<!-- <div class="section">
					  <div class="sec-title">用户标签</div>
					  <div class="sec-ctx">
					    <div class="xinxi-box">
					      <div class="info-list">
					        <div class="info-item">
					          <div class="label">人物画像：</div>
					          <div class="val">
					            <el-tag type="success"> 新用户 </el-tag>
					            <el-tag type="success"> 旅游 </el-tag>
					            <el-tag type="success"> 摄影 </el-tag>
					          </div>
					        </div>
					
					        <div class="info-item">
					          <div class="label">名字：</div>
					          <div class="val">0</div>
					        </div>
					        <div class="info-item">
					          <div class="label">纪元号：</div>
					          <div class="val">0</div>
					        </div>
					        <div class="info-item">
					          <div class="label">简介：</div>
					          <div class="val">0</div>
					        </div>
					        <div class="info-item">
					          <div class="label">地区：</div>
					          <div class="val">0</div>
					        </div>
					        <div class="info-item">
					          <div class="label">职业：</div>
					          <div class="val">0</div>
					        </div>
					        <div class="info-item">
					          <div class="label">学校：</div>
					          <div class="val">0</div>
					        </div>
					        <div class="info-item">
					          <div class="label">座驾：</div>
					          <div class="val">0</div>
					        </div>
					      </div>
					    </div>
					  </div>
					</div> -->


		<div class="section">
			<div class="sec-title">资产信息</div>
			<div class="sec-ctx">
				<div class="xinxi-box">
					<div class="info-list">
						<div class="info-item">
							<div class="label">积分：</div>
							<div class="val">{{info.jifen}}
								<!-- <el-link type="primary">查看</el-link> -->
							</div>
						</div>
						<div class="info-item">
							<div class="label">余额：</div>
							<div class="val">{{info.money}}
								<!-- <el-link type="primary">查看</el-link> -->
							</div>
						</div>
						<div class="info-item">
							<div class="label">佣金：</div>
							<div class="val">{{info.commission}}
								<!-- <el-link type="primary">查看</el-link> -->
							</div>
						</div>
						<!-- <div class="info-item">
					          <div class="label">银行卡：</div>
					          <div class="val">{{info.jifen}}<el-link type="primary">查看</el-link></div>
					        </div> -->
					</div>
				</div>
			</div>
		</div>

		<!-- <div class="section">
					  <div class="sec-title">交易统计</div>
					  <div class="sec-ctx">
					    <div class="xinxi-box">
					      <div class="info-list">
					        <div class="info-item">
					          <div class="label">订单数：</div>
					          <div class="val">
					            0
					            <el-link type="primary">查看</el-link>
					          </div>
					        </div>
					        <div class="info-item">
					          <div class="label">累计消费：</div>
					          <div class="val">
					            0
					            <el-link type="primary">查看</el-link>
					          </div>
					        </div>
					        <div class="info-item">
					          <div class="label">退款数：</div>
					          <div class="val">
					            0
					            <el-link type="primary">查看</el-link>
					          </div>
					        </div>
					        <div class="info-item">
					          <div class="label">累计退款金额：</div>
					          <div class="val">
					            0
					            <el-link type="primary">查看</el-link>
					          </div>
					        </div>
					
					        <div class="info-item">
					          <div class="label">实际消费订单数：</div>
					          <div class="val">
					            0
					            <el-link type="primary">查看</el-link>
					          </div>
					        </div>
					        <div class="info-item">
					          <div class="label">实际消费金额：</div>
					          <div class="val">
					            0
					            <el-link type="primary">查看</el-link>
					          </div>
					        </div>
					      </div>
					    </div>
					  </div>
					</div> -->

		<user_auth_modal ref="user_auth_modal" @confirm="confirmAuth" />
	</div>
</template>

<script>
	import user_auth_modal from '@/components/user/user_auth_modal.vue'
	
	import { mapState } from "vuex";
	export default {
		name: "news",
		components: {
			user_auth_modal
		},
		data() {
			return {
				id: this.$route.query.id || '',
				info: {

				},

				auth_status_title: '',
				auth_status_map: {
					0: '未提交',
					1: '待审核',
					2: '已通过',
					'-1': '被驳回',
				},
			};
		},
		computed: {},
		watch: {},
		created() {
			this.setView();
		},
		mounted() {},
		methods: {
			setView() {
				this.$api({
					url: "",
					method: "get",
					data: {
						action: 'users_detail',
						id: this.id
					},
				}).then((res) => {
					// console.warn("新闻详情", res);
					if (res.code == 200) {
						this.info = res.data

						this.auth_status_title = this.auth_status_map[this.info.renzheng]
					}
				});
			},
			
			open_auth() {
				this.$refs.user_auth_modal.init(this.info)
			},
			confirmAuth() {
				this.setView()
			}
		},
	};
</script>


<style scoped lang="less">
	.page-wrap {
		.page-inner {}
	}

	.section {
		margin-bottom: 10px;
		background: #fff;
		padding: 20px;
		border-radius: 6px;
	}

	.sec-title {
		margin-bottom: 20px;
		font-size: 14px;
		font-weight: bold;
	}

	.sec-ctx {}

	.info-list {
		flex-wrap: wrap;
		// display: flex;
		flex-wrap: wrap;

		.info-item {
			margin-bottom: 15px;
			display: flex;

			&+.info-item {
				// margin-left: 20px;
			}

			.label {}

			.val {
				.el-tag {
					margin-right: 15px;
				}

				.el-link {
					font-size: 12px;
					margin-left: 20px;
				}
			}
		}
	}

	.base-box {
		display: flex;

		.base-left {
			.avatar-box {
				width: 50px;
				height: 50px;
				border-radius: 50%;
				overflow: hidden;
			}
		}

		.base-right {
			padding-left: 30px;

			.info-list {
				display: flex;
				width: 900px;

				.info-item {
					width: 300px;
				}
			}
		}
	}

	.xinxi-box {
		padding-left: 80px;

		.info-list {
			display: flex;
			width: 900px;

			.info-item {
				width: 300px;
			}
		}
	}

	// 商品信息
	.product-box {
		display: flex;
		align-items: flex-start;

		.table-image-item {}

		.product-title-box {
			padding-left: 10px;

			.product-title {
				margin-bottom: 15px;
			}

			.product-guige {}
		}
	}
</style>